<template>
  <!-- 顶部京东登录 -->
  <van-sticky>
    <van-nav-bar title="京东登录" left-text="返回" left-arrow @click-left="$router.push('/home')" />
  </van-sticky>

  <!-- 用户名和密码登录 -->
  <van-form @submit="onSubmit" style="margin-top:
  30px">
    <van-cell-group inset>
      <!-- 通过 pattern 进行正则校验 -->
      <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
        :rules="[{ required: true, message: '请输入正确格式' }]" />
      <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
        :rules="[{ required: true, message: '密码格式不正确' }]" />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>

  <!-- 注册 -->
  <van-cell-group title="去注册" style="margin-left: 15px;margin-right: 15px">
    <van-cell title="快速注册" is-link style="margin-top:-10px; border-radius: 20px" to="/regist/step1" />
  </van-cell-group>
</template>

<script>
import { login } from '../server/login.js'
import { showNotify } from 'vant';
export default {
  data() {
    return {
      username: "",
      password: "",
    }
  },

  methods: {
    // 用户名和密码登录
    onSubmit() {
      let loginname = localStorage.getItem("telphone")
      let password = localStorage.getItem("password")
      // let loginname = this.$store.state.telphone
      // let password = this.$store.state.password

      login({ loginname, password }).then((res) => {
        if (res.code === "200") {
          localStorage.setItem("token", res.data.token)
          localStorage.setItem("userid", res.data.userid)
          // 将token和userid存储到本地仓库
          // this.$store.commit("tokenStore", res.data.token)
          // this.$store.commit("useridStore", res.data.userid)

          if (this.username === loginname && this.password === password) {
            // this.$store.commit("changePhone", this.telphone)
            // this.$store.commit("passwordStore", this.password)
            this.$router.push('/home')
          }

          else {
            // 警告通知
            showNotify({ type: 'danger', message: '用户名或密码错误,请重新输入' });
            this.username = ""
            this.password = ""
          }
        }
      })
    }
  }
}

</script>
<style scoped>
.van-button {
  background-color: red;
  color: white;
}

h6 {
  font-size: 10px;
  margin-bottom: 6px;
  margin-left: 20px;
  color: #afb3b6;
}
</style>